<template>
  <a-modal
      width='409px'
      title='移动交付物'
      cancelText="取消"
      okText="确定"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-form>
        <a-form-item label="位置："> 
          <a-tree-select
            treeCheckable
            :treeData='treeData'
            style="width: 266px; margin-top: 5px"
            :value="selectTreeArr"
            placeholder='请选择移动交付物位置'
            allowClear
            treeCheckStrictly
             treeDefaultExpandAll
            @select='onSelect'
            @change="onChange"
            :key="(new Date()).getTime()+ '1'"
          >
          </a-tree-select>
        </a-form-item>
      </a-form>
  </a-modal>
</template>
<script>
import { mapGetters } from 'vuex'
import { moveObjForAllVersion } from "@/api/fileSingle.js"
import copyACtion from '@/views/singleProject/fileSingle/el-common-js/copy'
export default {
  mixins: [copyACtion],
  data() {
    return {
      confirmLoading: false,
      visible: false,
      selectTreeArr: [],
      treeData: [],
      ftreeItemOid: {},
      treeItem: {},
      show:true
    }
  },
  props: {
    sessionData: {
      type: Array,
      default: () => []
    },//存入的session
  },
  computed: {
    ...mapGetters({
      'fileSingleData': 'fileSingle'
    })
  },
  methods: {
    /**
     * tree事件
     * 功能：只能选择一个tree
     */
    onChange (val) {
      if (val.length > 1) {
        let data = val
        val = []
        val.push(data[data.length - 1])
      }
      this.selectTreeArr = val
    },
    onExpands (selectedKeys, info)  {
    this.setState({ checkedKey: selectedKeys });
    },
    /**
     * tree事件
     * 功能： 获取当前点击的tree
     */
    onSelect (value) {
      this.treeItem = value
     console.log(this.treeItem);
    },
    /**
     * 开启弹窗
     * key 上级需要开启那个弹窗的key props上级tree选中的tree，propsArr 上级table选中的数据
     */
    openModal (start,sessionData) {
      let _this = this
      this.visible = start
      this.selectTreeArr[0] =  {
        label:sessionData[0].folderName,
        value:sessionData[0].folderOid
      }
      this.getTreeData({ callback: (res) => {
        if (res.code === 200) {
       //   console.log('组件树的数据',res.data);
          // this.treeData = res.data
          this.getDisabled(res.data)
          _this.initTreeIsOpen(res.data)
        }
      }})
    },
    /**
     * 确定按钮方法
     * 功能： 移动交付物
     */
    handleOk () {
      if (!this.treeItem.value) return
      let data = []
      this.sessionData.forEach(el => {
        data.push({ objOid: el.oid, folderOid: this.treeItem.value })
      })
      this.confirmLoading = true
      moveObjForAllVersion({ items: data }).then((res) => {
        this.confirmLoading = false
        if (res && res.data.success) {
          this.$emit('initTableData')
          this.selectTreeArr = []
          this.visible = false
          this.$message.success('移动成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    /**
     * 取消按钮方法
     */
    handleCancel () {
      this.visible = false
      this.selectTreeArr = []
    },
    /**
     * 初始化结构树数据
     * 功能： data当前结构树数组
     */
    initTreeIsOpen (data) {
      data.forEach(el => {
        el.title = el.name
        el.value = el.oid
        el.key = el.oid
        el.children = el.childs
        if (el.childs) {
          this.initTreeIsOpen(el.childs)
        } else {
          return
        }
      })
    },
    //只能选最下层数据
    getDisabled(data) {
     data.forEach((item) => {
        if (item.childs.length!==0) {
            item.disabled = true;
            this.getDisabled(item.childs)
        }
        this.treeData = data;
     });
        console.log(this.treeData);
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-select-selection__rendered {
  height: 30px;
  overflow: hidden;
  .ant-select-selection__choice {
    font-size: 14px;
    color: #333333;
    border: none;
    .ant-select-selection__choice__remove {
      display: none;
    }
  }
}
</style>
<style lang="less">
.ant-select-tree li .ant-select-tree-node-content-wrapper:hover {
  color: #386BD7;
  background-color: #E8F0FD;
}
</style>